<script type="module">
  import { createApp, reactive } from '../src'
  createApp().mount()
</script>

<div
  id="root"
  ref="root"
  v-scope="{ dynamicRef: 'x', show: true }"
  v-effect="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
>
  <p>Accessing root el: id is {{ $refs.root.id }}</p>

  <input ref="input" />
  <span v-if="show" :ref="dynamicRef">Span with dynamic ref</span>
  <p>dynamicRef is {{ dynamicRef }}</p>
  <button @click="dynamicRef = dynamicRef === 'x' ? 'y' : 'x'">
    change dynamicRef
  </button>
  <button @click="show = !show">toggle</button>

  <div v-scope>
    <p ref="x">nested scope ref</p>
    <button
      @click="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
    >
      log nested scope refs
    </button>
  </div>
</div>
